<template>
  <div class="init_main">
    <p class="name_sty">{{ name }}</p>
    <div class="query">
      质控类型：
      <el-select
        v-model="query.filter.qcLevel"
        placeholder=""
        size="mini"
        @change="getQX"
      >
        <el-option label="一级质控流程" :value="1"> </el-option>
        <!-- <el-option label="二级质控流程" :value="2"> </el-option> -->
        <el-option label="二级质控流程" :value="4"> </el-option>
      </el-select>
      <!-- 模板组：
      <el-select
        v-model="query.value"
        placeholder=""
        size="mini"
        style="width: 140px"
      >
        <el-option label="test" value="test"> </el-option>
      </el-select>
      模板：
      <el-select
        v-model="query.value"
        placeholder=""
        size="mini"
        style="width: 140px"
      >
        <el-option label="test" value="test"> </el-option>
      </el-select>
      科室：
      <el-select
        v-model="query.value"
        placeholder=""
        size="mini"
        style="width: 140px"
      >
        <el-option label="test" value="test"> </el-option>
      </el-select>
      操作状态：
      <el-select
        v-model="query.value"
        placeholder=""
        size="mini"
        style="width: 140px"
      >
        <el-option label="test" value="test"> </el-option>
      </el-select> -->
      <!-- 质控级别：
      <el-select
        v-model="query.value"
        placeholder=""
        size="mini"
        style="width: 140px"
      >
        <el-option label="test" value="test"> </el-option>
      </el-select>
      是否满分：
      <el-select
        v-model="query.value"
        placeholder=""
        size="mini"
        style="width: 140px"
      >
        <el-option label="test" value="test"> </el-option>
      </el-select> -->
      机构：
      <el-cascader
        size="mini"
        :options="OrganTree"
        :props="{
          checkStrictly: true,
          value: 'Id',
          label: 'Name',
          children: 'Children',
        }"
        clearable
        v-model="checkHospitalId"
        @change="
          query.filter.checkHospitalId =
            checkHospitalId[checkHospitalId.length - 1]
        "
      ></el-cascader>
      <el-button
        plain
        size="mini"
        icon="el-icon-search"
        style="margin-left: 10px"
        @click="getList"
        :disabled="userQX.查询"
        >查询</el-button
      >
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-plus"
        type="primary"
        @click="open_dialog('新增')"
        >新增</el-button
      > -->
      <!-- <el-button
        plain
        size="mini"
        icon="el-icon-edit"
        type="warning"
        @click="open_dialog('审核')"
        >审核</el-button
      >
      <el-button plain size="mini" icon="el-icon-edit" type="warning"
        >归档</el-button
      > -->
      <!-- <el-button plain size="mini" icon="el-icon-delete" type="danger"
        >删除</el-button
      > -->
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="600"
        highlight-current-row
        @current-change="row_click"
      >
        <el-table-column prop="操作" label="操作" width="140">
          <template slot-scope="scope">
            <span style="color: blue">
              <el-button type="text" @click="to_Ti2(scope.row)">查看</el-button>
              <el-button type="text" @click="open_dialog(scope.row)"
                >整改措施</el-button
              >
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="进度">
          <template slot-scope="scope">
            {{ scope.row.DoneCount }} / {{ scope.row.InvestigatorCount }}
          </template>
        </el-table-column>
        <el-table-column prop="Name" label="任务名称"> </el-table-column>
        <el-table-column prop="CheckGroupName" label="检查组">
        </el-table-column>
        <el-table-column label="成员">
          <template slot-scope="scope">
            <span
              v-for="(item, index) in scope.row.Users"
              :key="index"
              :style="item.UserTyoe == 1 ? 'color:red' : ''"
              >{{ item.UserName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="CheckSectionName" label="调查科室">
        </el-table-column>
        <el-table-column prop="Status" label="状态">
          <template slot-scope="scope">
            {{ scope.row.Status | toStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="TemplateGroupName" label="模板组">
        </el-table-column>
        <el-table-column prop="TemplateName" label="模板名称">
        </el-table-column>
        <el-table-column prop="PeriodType" label="检查周期">
          <template slot-scope="scope">
            <span>{{ scope.row.PeriodType | PeriodType_tostr }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="InvestigatorCount" label="调查份数">
        </el-table-column>
        <el-table-column prop="PlanTime" label="计划执行时间">
        </el-table-column>
        <el-table-column prop="StartTime" label="开始时间"> </el-table-column>
        <el-table-column prop="EndTime" label="结束时间"> </el-table-column>
        <el-table-column prop="InvestigatorType" label="被调查者类型">
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange_page"
        :current-page="query.CurrentPage"
        :page-sizes="[10, 15, 50, 100]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="query.total"
      >
      </el-pagination>
    </div>
    <!-- 弹层 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <table border="1" style="width: 100%">
        <tr>
          <td class="tac">检查时间：</td>
          <td colspan="5">
            <!-- <el-input
              type="textarea"
              :rows="5"
              v-model="form.HasProblem"
            ></el-input> -->
            <p>{{ iswt.SurveyTime | formatDateTime }}</p>
          </td>
        </tr>
        <tr>
          <td class="tac">存在问题：</td>
          <td colspan="5">
            <!-- <el-input
              type="textarea"
              :rows="5"
              v-model="form.HasProblem"
            ></el-input> -->
            <p style="min-height: 117px" v-html="iswt.Problem"></p>
          </td>
        </tr>
        <tr>
          <td class="tac">原因分析：</td>
          <td colspan="5">
            <el-input
              type="textarea"
              :rows="5"
              v-model="form.Reason"
              disabled
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="tac">整改意见：</td>
          <td colspan="5">
            <el-input
              type="textarea"
              :rows="5"
              v-model="form.Improvement"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td class="tac">整改时间：</td>
          <td colspan="2">
            <el-date-picker
              v-model="form.ImprovementTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              size="small"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </td>
          <!-- <td class="tac">整改人：</td>
          <td colspan="2">
            <el-input
              size="mini"
              v-model="form.DistributePersonName"
            ></el-input>
          </td> -->
        </tr>
        <tr v-if="form.IsOverrule">
          <td class="tac">驳回原因：</td>
          <td>
            <el-input
              type="textarea"
              :rows="6"
              v-model="form.OverruleReason"
              disabled
            ></el-input>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-input
          size="mini"
          v-model="OverruleReason"
          style="width: 150px"
        ></el-input>
        <el-button type="danger" @click="btn_no()" size="mini">驳 回</el-button>
        <el-button @click="handleClose" size="mini">关 闭</el-button>
        <el-button type="success" @click="btn_ok" size="mini">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      query: {
        CurrentPage: 1,
        pageSize: 10,
        total: 0,
        filter: {
          status: 31,
          SystemCategory: "质量检查",
          checkHospitalId: window.localStorage.getItem("hospitalId"),
          qcLevel: 1,
          menuName: "整改措施",
        },
      },
      tableData: [],
      dialogVisible: false,
      dialog_title: "",
      row_info: null,
      form: {},
      OrganTree: [],
      checkHospitalId: window.localStorage.getItem("hospitalId"),
      userQX: {},
      iswt: {},
      OverruleReason: "",
    };
  },
  mounted() {
    this.name = this.$route.meta.title;
    this.getQX();
    this.getOrgan();
  },
  filters: {
    toStatus(val) {
      var str = "";
      if (val == 0) {
        str = "未发布";
      }
      if (val == 1) {
        str = "开始调查";
      }
      if (val == 10) {
        str = "继续调查";
      }
      if (val == 20) {
        str = "待提交";
      }
      if (val == 30) {
        str = "审核提交";
      }
      if (val == 31) {
        str = "整改措施";
      }
      if (val == 32) {
        str = "病区跟踪检查";
      }
      if (val == 33) {
        str = "护理部跟踪检查";
      }
      if (val == 40) {
        str = "完成";
      }
      if (val == 41) {
        str = "审核下发";
      }
      if (val == 42) {
        str = "原因分析";
      }
      return str;
    },
    PeriodType_tostr(val) {
      var str = "";
      if (val == 4) {
        str = "月";
      }
      if (val == 5) {
        str = "周";
      }
      return str;
    },
    formatDateTime(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
      );
    },
  },
  methods: {
    getQX() {
      this.$get(
        "/Task/GetPermission/" + this.query.filter.qcLevel + "/整改措施"
      ).then((res) => {
        var list = res.Data;
        var data = {
          查询: true,
          新增: true,
          修改: true,
          删除: true,
        };
        for (var item in list) {
          console.log(item);
          if (list[item] == "查看") {
            data.查询 = false;
            this.getList();
          }
          if (list[item] == "新增") {
            data.新增 = false;
          }
          if (list[item] == "编辑") {
            data.修改 = false;
          }
          if (list[item] == "删除") {
            data.删除 = false;
          }
        }
        this.userQX = data;
        console.log(data);
      });
    },
    getOrgan() {
      this.$get(
        "/Task/GetOrganTree?id=" + window.localStorage.getItem("hospitalId2")
      ).then((res) => {
        this.OrganTree = res.Data;
      });
    },
    getList() {
      this.$post("/Task/GetPageListRepsonse", this.query).then((res) => {
        this.tableData = res.Data.PageList;
        this.query.total = res.Data.Total;
      });
    },
    open_windo(url) {
      window.open(url);
    },
    row_click(row) {
      if (!row) {
        this.row_info = null;
        return;
      }
      this.row_info = row;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    btn_ok() {
      var body = this.form;
      body.Status = 32;
      this.$put("/Task/UpdateOne", body).then((res) => {
        this.getList();
        this.handleClose();
      });
    },
    btn_no() {
      var body = {
        id: this.form.Id,
        overruleReason: this.OverruleReason,
      };
      this.$post("/Task/Overrule", body).then((res) => {
        this.getList();
        this.handleClose();
      });
    },
    to_Ti2(row) {
      if (this.$route.query.ipad) {
        this.$router.push("/IPAD/Ti_zljc?btn=2&taskDataId=" + row.Id);
      } else {
        this.$router.push("/Ti_zljc?btn=2&taskDataId=" + row.Id);
      }
    },
    open_dialog(val) {
      this.form = val;
      console.log(val);
      // this.form = this.row_info;
      this.$get("/Task/GetProblemContent/" + val.Id).then((res) => {
        this.iswt = res.Data;
        this.iswt.Problem = this.iswt.Problem.replace("\r\n", "<br>");
        this.dialogVisible = true;
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.query.CurrentPage = 1;
    },
    handleCurrentChange_page(val) {
      this.query.CurrentPage = val;
      this.getList();
    },
  },
};
</script>

<style scoped lang='scss'>
.init_main {
  background-color: #fff;
  height: calc(100vh - 60px);
  border: 1px solid #333;
  border-radius: 5px;
  margin: 5px;
  padding: 10px;
  font-family: "FangSong";
  color: #000;
  .name_sty {
    color: #000;
    font-weight: 700;
    font-size: 18px;
    font-family: "FangSong";
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
  }
  .table {
    margin-top: 15px;
  }
  .page {
    text-align: right;
  }
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background-color: rgb(208, 229, 250);
  color: rgb(65, 158, 255);
  font-weight: 700;
}
.tac {
  text-align: center;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #000 !important;
}
</style>